<template>
  <a-locale-provider :locale="zh_CN">
    <a-layout>
      <a-layout-sider :trigger="null" collapsible v-model="collapsed">
        <div class="logo" @click="goTo(`/admin/`)"/>
        <a-menu theme="dark" mode="inline">

          <a-menu-item key="1" @click="goTo(`/admin/settings/`)">
            <a-icon type="radius-setting" />
            <span>设置</span>
          </a-menu-item>

          <a-menu-item key="2" @click="goTo(`/admin/sentences/`)">
            <a-icon type="book" />
            <span>句子</span>
          </a-menu-item>

          <a-menu-item key="3" @click="goTo(`/admin/subscribes/`)">
            <a-icon type="mail" />
            <span>订阅</span>
          </a-menu-item>

          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="read" /><span>文章</span></span>
            <a-menu-item key="sub1-1" @click="goTo(`/admin/article/create/`)">
              <span>发布文章</span>
            </a-menu-item>
            <a-menu-item key="sub1-2" @click="goTo(`/admin/article/list/`)">
              <span>文章列表</span>
            </a-menu-item>
          </a-sub-menu>

          <a-menu-item key="4" @click="goTo(`/admin/links/`)">
            <a-icon type="link" />
            <span>友人帐</span>
          </a-menu-item>

          <a-menu-item key="5" @click="goTo(`/admin/feedbacks/`)">
            <a-icon type="medicine-box" />
            <span>反馈</span>
          </a-menu-item>

          <a-menu-item key="6" @click="goTo(`/admin/transfers/`)">
            <a-icon type="folder" />
            <span>快传</span>
          </a-menu-item>

          <a-menu-item key="7" @click="goTo(`/admin/letters/`)">
            <a-icon type="audit" />
            <span>信件</span>
          </a-menu-item>

        </a-menu>
      </a-layout-sider>

      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <a-icon class="trigger"
                  :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                  @click="()=> collapsed = !collapsed"/>

          <a-avatar style="float: right;margin-top: 12px;margin-right: 10px" :src="$store.state.user.avatar" />

        </a-layout-header>
        <a-layout-content :style="contentStyle">
          <nuxt />
        </a-layout-content>
        <a-layout-footer>
          <a-back-top />
          <div style="text-align: center">
            后台管理
          </div>
        </a-layout-footer>
      </a-layout>

    </a-layout>
  </a-locale-provider>
</template>

<script>
  import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
  export default {
    name: "admin",
    middleware: 'admin-auth',
    data: ()=>({
      zh_CN,
      collapsed: true,
      contentStyle: {
        margin: '24px 16px',
        padding: '24px',
        background: '#fff',
        minHeight: '600px'
      }
    }),
    methods: {
      goTo(path) {
        this.$router.push({ path: path })
      },
    }
  }
</script>

<style>
  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }
  .trigger:hover {
    color: #1890ff;
  }

  .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
  }
</style>
